<template>
    <div class="UpdatePwd">
        <h1>修改密码</h1>
        <div class="form">
            <div class="input">
                <label>旧密码</label>
                <input class="t-input" type="password" v-model="old_pwd" />
            </div>
            <div class="input">
                <label>新密码</label>
                <input class="t-input" type="password" v-model="new_pwd" />
            </div>
            <p v-show="tip !== ''" v-text="tip" />
            <button class="t-btn" @click="update()" >确认修改</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
        },
        data(){
            return{
                old_pwd:'',
                new_pwd:''
            }
        },
        methods:{
            update(){
                if (this.tip.length !== 0)
                    return;
                this.$axios.post('/user/updatePwd', {oldPwd: this.old_pwd, newPwd: this.new_pwd})
                    .then(this.$then);
            }
        },
        computed:{
            tip(){
                if (this.old_pwd === '' || this.new_pwd === '')
                    return '密码长度不能小于四位，并且修改前后不能相同';
                if (this.old_pwd.length < 4 || this.new_pwd.length < 4)
                    return '密码长度不能小于四位';
                if (this.old_pwd === this.new_pwd)
                    return '旧密码不能和新密码相同';
                return '';
            }
        }
    };
</script>
<style scoped lang="scss" >
    @import "UpdatePwd";
</style>
